<template>
  <div></div>
</template>
<script src="//webapi.amap.com/maps?v=2.0&key=c3d7704b5004b9686512f5f72a461292"></script>
<script>
import { mapState } from 'vuex';
import AMapLoader from '@amap/amap-jsapi-loader';
export default {
  computed: {
...mapState(['addr']),
  },
  methods: {
    getCity() {
      AMapLoader.load({ //首次调用 load
        key:'c3d7704b5004b9686512f5f72a461292',//首次load key为必填
        version:'2.0',
      	AMapUI: {
            version: '1.1',
            plugins:["misc/MobiCityPicker"]
        }
    }).then((AMap)=>{
        
        var that = this;
      //加载MobiCityPicker，loadUI的路径参数为模块名中 'ui/' 之后的部分
      AMapUI.loadUI(["misc/MobiCityPicker"], function (MobiCityPicker) {
        var cityPicker = new MobiCityPicker({
          //topGroups: ..., // 顶部城市列表
        });

        //监听城市选中事件
        cityPicker.on("citySelected", function (cityInfo) {
          //隐藏城市列表
          cityPicker.hide();

          //选中的城市信息
          console.log(cityInfo);
          that.$store.commit("updateAddr", cityInfo);
          console.log('addr',that.addr)
          that.$router.push("/geoloc");
        });

        //显示城市列表，可以用某个click事件触发
        cityPicker.show();
      });
      
      //var that = this;
      //加载MobiCityPicker，loadUI的路径参数为模块名中 'ui/' 之后的部分
    //   AMapUI.loadUI(["misc/MobiCityPicker"], function (MobiCityPicker) {
    //     var cityPicker = new MobiCityPicker({
    //       //topGroups: ..., // 顶部城市列表
    //     });

    //     //监听城市选中事件
    //     cityPicker.on("citySelected", function (cityInfo) {
    //       //隐藏城市列表
    //       cityPicker.hide();

    //       //选中的城市信息
    //       console.log(cityInfo);
    //       that.$store.commit("updateAddr", cityInfo);
    //       console.log('addr',that.addr)
    //       that.$router.push("/geoloc");
    //     });

    //     //显示城市列表，可以用某个click事件触发
    //     cityPicker.show();
    //   });
    })
     }
  },
  mounted() {
    this.getCity();
  },
};
</script>

<style lang="scss" scoped>
</style>